<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function usernameTip(){
                var usernameInfo=document.getElementById("usernameInfo");
                usernameInfo.innerHTML="用户名:以数字字母开头和结尾，用户名可以是数字、字母、下划线、.、-组成，3-18位";
                usernameInfo.style.color="lightgreen";
                usernameInfo.style.fontSize="12px";
            }
            function checkUsername(){
                var txt=document.getElementById("username").value;
                var reg=/^[0-9a-z][0-9a-z_.-]{1,16}[0-9a-z]$/;
                if(reg.test(txt)){
                    document.getElementById("usernameInfo").innerHTML="ok";
                    document.getElementById("usernameInfo").style.color="green";
                    return true;
                }else{
                    document.getElementById("usernameInfo").innerHTML="用户名格式错误";
                    document.getElementById("usernameInfo").style.color="red";
                    return false;
                }
            }
            function passwordTip(){
                var passwordInfo=document.getElementById("passwordInfo");
                passwordInfo.innerHTML="密码是数字字母组成，是6-10位";
                passwordInfo.style.color="lightgreen";
                passwordInfo.style.fontSize="12px";
            }
            function checkPassword(){
                var txt=document.getElementById("password").value;
                var reg=/^[0-9a-z]{6,10}$/;
                if(reg.test(txt)){
                    document.getElementById("passwordInfo").innerHTML="ok";
                    document.getElementById("passwordInfo").style.color="green";
                    return true;
                }else{
                    document.getElementById("passwordInfo").innerHTML="密码格式错误";
                    document.getElementById("passwordInfo").style.color="red";
                    return false;
                }
            }
            function phoneTip(){
                var phoneInfo=document.getElementById("phoneInfo");
                phoneInfo.innerHTML="手机号以13、15、18、19开头，共11位";
                phoneInfo.style.color="lightgreen";
                phoneInfo.style.fontSize="12px";
            }
            function checkPhone(){
                var txt=document.getElementById("phone").value;
                var reg=/^1[3589]\d{9}$/;
                if(reg.test(txt)){
                    document.getElementById("phoneInfo").innerHTML="ok";
                    document.getElementById("phoneInfo").style.color="green";
                    return true;
                }else{
                    document.getElementById("phoneInfo").innerHTML="手机格式错误";
                    document.getElementById("phoneInfo").style.color="red";
                    return false;
                }
            }
            function checkAll(){
                return checkUsername()&&checkPassword()&&checkPhone();
            }
        </script>
    </head>
    <body>

        <!--
            onsubmit:提交表单数据的时候触发
        -->
        <form action="success.html" onsubmit="return checkAll()">
            用户名:
            <!--onfocus:获得焦点-->
            <!--onblur:失去焦点-->
            <input type="text" id="username"  onfocus="usernameTip()" onblur="checkUsername()">
            <span id="usernameInfo"></span>
            <br>
            密码:
            <input type="text" id="password"  onfocus="passwordTip()" onblur="checkPassword()">
            <span id="passwordInfo"></span>
            <br>
            电话:
            <input type="text" id="phone"  onfocus="phonedTip()" onblur="checkPhone()">
            <span id="phoneInfo"></span>
            <br>

            <input type="submit" value="提交">
        </form>
    </body>
</html>